<template>
  <div>
    <bar-chart
      :height="height"
      :opinionNew="optionMediaSourceDetails"
      :saveImage="true"
      @getBase64Image="getBase64Image"
    />
  </div>
</template>
<script>
  import {
    getMediaNameAnalysis,
  } from "@/api/system/reportGenerate";
  import BarChart from '@/components/Echarts/Generate/BarChart'

export default {
  props: {
    eventId: {
        type: Number,
        default: 0
      },

  },
  data() {
    return {
      optionTitleTextMediaSourceDetails: '',
      optionSeriesMediaSourceDetails: [],
      optionXAxisDataMediaSourceDetails: [],
      optionMediaSourceDetails:{},
      height: "476px",
      loading: true,

    }
  },
  components:{
    BarChart,
  },
  computed: {
  },
  watch: {},
  mounted() {
    this.getMediaNameAnalysis()
  },
  created() {

  },
  methods: {
    getBase64Image(val) {
      this.$emit('getBase64Image', val)
    },

    getMediaNameAnalysis() {
      this.loading = true;
      getMediaNameAnalysis(this.eventId).then(response => {
        this.loading = false;
        //媒体来源明细
        let mediaSourceDetails = response.data
        this.optionTitleTextMediaSourceDetails = ''
        this.optionSeriesMediaSourceDetails = []
        this.optionXAxisDataMediaSourceDetails = []
        let objData = []
        mediaSourceDetails.forEach(item => {
          this.optionXAxisDataMediaSourceDetails.push(item.name)
          objData.push(item.value)
        })
        let obj = {
          data: objData,
          type: 'bar',
          barMaxWidth: 50,//最大宽度
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
        this.optionSeriesMediaSourceDetails.push(obj)
        this.optionMediaSourceDetails = {
          title: {
            text: this.optionTitleTextMediaSourceDetails,
          },
          backgroundColor: '#fff',
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            top: 10,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: this.optionXAxisDataMediaSourceDetails,
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value',
            axisTick: {
              show: false
            }
          }],
          series: this.optionSeriesMediaSourceDetails
        }
      });
    },

  }
}
</script>

